<template>
  <div class="container">
    <div class="hrForm">
      <div class="choice" ref="choice">
        <p @click="changeTabs(false)">我要找工作</p>
        <p @click="changeTabs(true)">我要招聘</p>
      </div>
      <el-form :model="stInfo" status-icon :rules="strules" ref="hrInfo" label-width="100px" class="hrruleForm">
        <!-- <el-form :model="stInfo" status-icon :rules="strules" ref="hrInfo" label-width="100px" class="hrruleForm"> -->
        <div v-if="!isHr">
        <el-form-item  prop="name">
          <el-input type="text" v-model="stInfo.name" auto-complete="off" placeholder="姓名"></el-input>
        </el-form-item>
        <el-form-item  prop="sex">
          <el-input type="text" v-model="stInfo.sex" auto-complete="off" placeholder="性别"></el-input>
        </el-form-item>
        <el-form-item  prop="card">
          <el-input type="text" v-model="stInfo.card" auto-complete="off" placeholder="身份证"></el-input>
        </el-form-item>
        <el-form-item  prop="school">
          <el-input type="text" v-model="stInfo.school" auto-complete="off" placeholder="学校"></el-input>
        </el-form-item>
        <el-form-item  prop="education">
          <el-input type="text" v-model="stInfo.education" auto-complete="off" placeholder="学历"></el-input>
        </el-form-item>
        <el-form-item  prop="college">
          <el-input type="text" v-model="stInfo.college" auto-complete="off" placeholder="学院"></el-input>
        </el-form-item>
        <el-form-item  prop="major">
          <el-input type="text" v-model="stInfo.major" auto-complete="off" placeholder="专业"></el-input>
        </el-form-item>
        <el-form-item  prop="account">
          <el-input type="text" v-model="stInfo.account" auto-complete="off" placeholder="用户名"></el-input>
        </el-form-item>
        <el-form-item  prop="password">
          <el-input type="password" v-model="stInfo.password" auto-complete="off" placeholder="密码"></el-input>
        </el-form-item>
        <el-form-item  prop="checkPass">
          <el-input type="password" v-model="stInfo.checkPass" auto-complete="off" placeholder="确认密码"></el-input>
        </el-form-item>
        <el-form-item prop="tel">
          <el-input v-model.number="stInfo.tel" placeholder="电话"></el-input>
        </el-form-item>
        <el-form-item prop="mail">
          <el-input v-model="stInfo.mail" placeholder="邮箱"></el-input>
        </el-form-item>
        <!-- <el-form-item prop="code">
        <el-input v-model.number="hrInfo.code"  style="width: 270px;padding-right: 10px;" placeholder="验证码"></el-input>
          <el-button  @click="sendCode">{{this.msg}}</el-button>
        </el-form-item> -->
        
        <el-form-item>
          <el-button type="primary" class="registerBtn" @click="stSubmit('stInfo')">注册</el-button>
        </el-form-item>
        </div>
        </el-form>
        <!-- 企业用户注册 -->
        <!-- <el-form :model="hrInfo" status-icon :rules="hrrules" ref="hrInfo" label-width="100px" class="hrruleForm"> -->
           <el-form :model="hrInfo" status-icon  ref="hrInfo" label-width="100px" class="hrruleForm">
        <div v-if="isHr">
          <el-form-item  prop="utel">
          <el-input type="text" v-model="hrInfo.utel" auto-complete="off" placeholder="手机号"></el-input>
        </el-form-item>
        <el-form-item  prop="name">
          <el-input type="text" v-model="hrInfo.umail" auto-complete="off" placeholder="企业邮箱"></el-input>
        </el-form-item>
        <!-- <el-form-item prop="code">
        <el-input v-model.number="hrInfo.ucode"  style="width: 270px;padding-right: 10px;" placeholder="验证码"></el-input>
          <el-button  @click="usendCode">{{this.msg}}</el-button>
        </el-form-item> -->
        <el-form-item  prop="upassword">
          <el-input type="password" v-model="hrInfo.upassword" auto-complete="off" placeholder="密码"></el-input>
        </el-form-item>
        <el-form-item  prop="ucheckPass">
          <el-input type="password" v-model="hrInfo.ucheckPass" auto-complete="off" placeholder="确认密码"></el-input>
        </el-form-item>
        <el-form-item  :label-width="formLabelWidth">
        <el-input v-model="hrInfo.name" auto-complete="off" placeholder="企业名称"></el-input>
      </el-form-item>
      <el-form-item  :label-width="formLabelWidth">
        <el-input v-model="hrInfo.logo" auto-complete="off" placeholder="企业logo(请输入URL)"></el-input>
      </el-form-item>
      <el-form-item :label-width="formLabelWidth">
        <el-select v-model="hrInfo.type" auto-complete="off" placeholder="企业类型">
           <el-option v-for="item in types" :key="item.value" :label="item.label" :value="item.value"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item  :label-width="formLabelWidth">
        <el-select v-model="hrInfo.scale" auto-complete="off" placeholder="企业规模">
           <el-option v-for="item in scales" :key="item.value" :label="item.label" :value="item.value"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item :label-width="formLabelWidth">
        <el-input v-model="hrInfo.intro" auto-complete="off" placeholder="企业简介"></el-input>
      </el-form-item>
      <el-form-item  :label-width="formLabelWidth">
        <el-input v-model="hrInfo.location" auto-complete="off" placeholder="企业地址"></el-input>
      </el-form-item>
      <el-form-item  :label-width="formLabelWidth">
        <el-input v-model="hrInfo.contact" auto-complete="off" placeholder="企业联系方式"></el-input>
      </el-form-item>
      <el-form-item  :label-width="formLabelWidth">
        <el-input v-model="hrInfo.audit_file" auto-complete="off" placeholder="企业营业执照(请输入URL)"></el-input>
      </el-form-item>
        <el-form-item>
          <el-button type="primary" class="registerBtn" @click="hrSubmit('hrInfo')">注册</el-button>
        </el-form-item>
        </div>
      </el-form>

     <div class="footer-tip3" @click="toLogin">
           已有账号?直接登录
    </div>
    <div class="footer-tip4" @click="toindex">
           返回首页
    </div>
    </div>
    
<!-- <img class="bg_bottom" src="../assets/bg_bottom.png"/>
<img class="bg_bottom2" src="../assets/bg_bottom2.png"/> -->
  </div>
</template>

<style>
@import "../assets/Animate/animate.min.css";
  html * {
    padding: 0;
    margin: 0;
  }

  * {
    box-sizing: border-box;
  }


  .container {
    width: 100%;
    position: relative;
    height: 100%;
    overflow: hidden;
  }

  .container::before {
    content: '';
    position: absolute;
    filter:blur(1px);
    /* background-image: url("https://upload-images.jianshu.io/upload_images/9381131-261e4e2e3fca50f5.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240"); */
    background-size: 100% 100%;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    transform: matrix(1, 0, 0, 1, 0, 0);
    transition: all 500ms linear 0s;
  }

  .container:hover::before {
    transform: matrix(1.05, 0, 0, 1.05, 3.07, 5.7)
  }

  .choice {
    text-align: left;
    padding-left: 110px;
  }

  .choice p{
    display: inline-block;
    width: 173px;
    height: 30px;
    text-align: center;
    line-height: 30px;
    color: #5a5a5a;
  }

  .choice p:first-child {
    border-right: 1px solid #ededed;
    font-weight: 700;
  }

  .hrForm {
    background: #fff;
    border: 1px solid #ededed;
    width: 540px;
    height: 1000px;
    margin: 100px auto 150px auto;
    box-shadow: 0px 5px 8px #888;
    border-radius: 8px;
    padding-top: 25px;
    position: relative;
  }



  .el-form-item__content {
    margin-left: 0px !important;
  }


  .hrruleForm {
    width: 500px;
    position: relative;
    top: 10px;
    left: -14px;
    padding: 10px 10px 14px 80px;
  }

  .choose {
    width: 100%;
  }

  .footer-tip3{
    position: absolute;
    bottom: 16px;
    right: 16px;
    cursor: pointer;
    color: rgba(0, 0, 0, 0.5);
  }

  .footer-tip4{
    position: absolute;
    bottom: 16px;
    left: 16px;
    cursor: pointer;
    color: rgba(0, 0, 0, 0.5);
  }

  .registerBtn {
    width: 100%;
  }

  .tips {
    margin-top: -20px;
    text-align: left;
    cursor: pointer;
    color: red;
    font-size: 14px;
  }

  .bg_bottom {
    position: fixed;
    bottom: 0;
    right: 0;
  }

  .bg_bottom2 {
    position: fixed;
    bottom: 0;
    left: 0;
  }

  .introduceCompany {
    color: #5f6368;
    font-size: 20px;
    font-weight: bold;
    position: absolute;
    top: 0;
    right: 0;
    width: 320px;
    height: 600px;
    padding: 30px 30px 0 0;
  }

  .introduceCompany img {
    width: 300px;
    height: 300px;;
    margin-bottom: 20px;
    cursor: pointer;
  }

  .companyForm {
    padding: 0 66px;
  }
</style>

<script>/* eslint-disable indent,quotes,space-before-function-paren,brace-style */

import fetch from '../api/fetch'

export default {
  data() {

    // var checkCode = (rule, value, callback) => {
    //   if (!value) {
    //     return callback(new Error("请输入验证码"))
    //   } else {
    //     callback()
    //   }
    // }
    // var checkCompany = (rule, value, callback) => {
    //   if (!value) {
    //     return callback(new Error("请选择公司"))
    //   } else {
    //     return callback()
    //   }

    // }

    var checkPhone = (rule, value, callback) => {
      if (!value) {
        return callback(new Error("请输入手机号"))
      } else if(!/^(0|86|17951)?(13[0-9]|15[012356789]|166|17[3678]|18[0-9]|14[57])[0-9]{8}$/.test(value)) {
        return callback(new Error("请输入正确的手机号"))
      } else {
        callback()
      }
    }
    var checkEmail = (rule, value, callback) => {
      if (!value) {
        return callback(new Error("请输入邮箱"))
      } else if(!/\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*/.test(value)) {
        return callback(new Error("请输入正确的邮箱"))
      }else {
        callback()
      }
    }
    var validUsername = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入用户名"))
      } else if (!/^\w+$/gi.test(value)) {
        callback(new Error("用户名必须由英文或者数字组成"))
      } else {
        callback()
      }
    }
    var validatePass = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入密码"))
      } else 
      {
        // if (this.hrInfo.checkPass !== "") {
        //   this.$refs.stInfo.validateField("checkPass")
        // }
        callback()
      }
    }
    var validatePass2 = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请再次输入密码"))
      } else if (value !== this.stInfo.password) {
        callback(new Error("两次输入密码不一致!"))
      } else {
        callback()
      }
    }
    var validsex = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入性别，1代表男性，2代表女性"))
      } else if (value!=="1"&&value!=="2") {
        callback(new Error("1代表男性，2代表女性"))
      } else {
        callback()
      }
    }
    
    return {

      msg: "发送验证码",
      count: "",
      timer: null,
      show: true,
      confirmCode: "",
      companyId: "",
      isHr: false,
      options: [],
      dialogShow: false,
      tipsShow: false,
      
      formLabelWidth: '120px',
      hrInfo: {
        upassword: '',
        ucheckPass: '',
        utel: '',
        umail: '',
        name:'',
        ucode: '',
        ename: '',
        logo: '',
        type: '',
        scale: '',
        intro: '',
        location: '',
        contact: '',
        auditFile: ''
      },

      stInfo: {
        name:'',
        card:'',
        school:'',
        education:'',
        college:'',
        major:'',
        account:'',
        password:'',
        mail:'',
        tel:'',
        checkPass: '',
        sex:'',
        code: ""
      },

      types: [{
          value: '0',
          label: '其他'
        },{
          value: '1',
          label: '互联网'
        }, {
          value: '2',
          label: '金融'
        }, {
          value: '3',
          label: '快消'
        }, {
          value: '4',
          label: '传媒'
        }, {
          value: '5',
          label: '餐饮'
        }, {
          value: '6',
          label: '教育'
        },{
          value: '7',
          label: '化工'
        },{
          value: '8',
          label: '不限'
        }
        ],
        scales: [{
          value: '0',
          label: '小于150人'
        },{
          value: '1',
          label: '150至500人'
        }, {
          value: '2',
          label: '500至2000人'
        }, {
          value: '3',
          label: '2000人以上'
        }
        ],       
      // hrrules: {
      //   code: [{validator: checkCode, trigger: "blur"}],
      //   company: [{validator: checkCompany, trigger: "blur"}],
      //   username: [{validator: validUsername, trigger: "blur"}],
      //   password: [{validator: validatePass, trigger: "blur"}],
      //   checkPass: [{validator: validatePass2, trigger: "blur"}],
      //   phone: [{validator: checkPhone, trigger: "blur"}],
      //   email: [{validator: checkEmail, trigger: "blur"}]
      // },
      strules: {
      //   code: [{validator: checkCode, trigger: "blur"}],

         account: [{validator: validUsername, trigger: "blur"}],
         password: [{validator: validatePass, trigger: "blur"}],
         checkPass: [{validator: validatePass2, trigger: "blur"}],
         tel: [{validator: checkPhone, trigger: "blur"}],
         mail: [{validator: checkEmail, trigger: "blur"}],
         sex: [{validator: validsex, trigger: "blur"}]
       }
    }
  },

  mounted() {
    this.addAnimation()
  },

  methods: {
    addAnimation() {
      let form = document.getElementsByClassName('hrForm')[0]
      form.classList.add('animated')
      form.classList.add('bounceInDown')
    },


    // sendCode() {
    //   const TIME_COUNT = 60
    //   if (!/\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*/.test(this.hrInfo.mail)) return
    //   fetch
    //     .sendCode(this.hrInfo.mail)
    //     .then(res => {
    //       if (res.status === 200) {
    //         if (res.data.success === true) {
    //           $message({
    //             message: '发送成功',
    //             type: 'success'
    //           })
    //         }
    //       }
    //     })
    //     .catch(e => {
    //       console.log(e)
    //     })
    //   if (!this.timer) {
    //     this.count = TIME_COUNT
    //     this.show = false
    //     this.timer = setInterval(() => {
    //       if (this.count > 0 && this.count <= TIME_COUNT) {
    //         this.count--
    //         this.msg = this.count + "s后发送"
    //         if (this.count === 0) {
    //           this.msg = '发送验证码'
    //         }
    //       } else {
    //         this.show = true
    //         clearInterval(this.timer)
    //         this.timer = null
    //       }
    //     }, 1000)
    //   }
    // },

    hrSubmit(formName) {
      
          var result1 = {
            umail: this.hrInfo.umail,
            name:this.hrInfo.name,
            upassword: this.hrInfo.upassword,
            utel: this.hrInfo.utel,
          }
          var result2={
            ename: this.hrInfo.ename,
            logo: this.hrInfo.logo,
            type: this.hrInfo.type,
            scale: this.hrInfo.scale,
            intro: this.hrInfo.intro,
            location: this.hrInfo.location,
            contact: this.hrInfo.contact,
            auditFile: this.hrInfo.auditFile
          }
          var ent = {EntUser:result1,EntInfo:result2}
          // hr注册
            fetch.hrRegister(ent).then(res => {
              console.log(res)
            
                if (res.data.code === 200) {
                  this.$message({
                    message: "注册成功",
                    type: "success"
                  });
                  this.$router.push({ name: "login" });
                } else {
                  this.$message({
                    message: res.data.msg,
                    type: "warning"
                   });
                }
               
            }).catch(e => {
            console.log(e)
          })
        
        
        
        
      
    },


    stSubmit(formName) {
      
          let result = {
            name: this.stInfo.name,
            card: this.stInfo.card,
            school: this.stInfo.school,
            education: this.stInfo.education,
            college: this.stInfo.college,
            major: this.stInfo.major,
            account: this.stInfo.account,
            password: this.stInfo.password,
            mail: this.stInfo.mail,
            tel: this.stInfo.tel,
            sex:this.stInfo.sex

            // username: this.hrInfo.username,
            // code: this.hrInfo.code,

          }

        // 学生注册
        fetch
          .userRegister(result)
          .then(res => {
            console.log(res)
            
              if (res.data.code ===200) {
                this.$message({
                  message: "注册成功",
                  type: "success"
                });
                this.$router.push({ name: "login" });
                } else {
                this.$message({
                  message: res.data.msg,
                  type: "warning"
                  });
                }
               
            })
            .catch(e => {
              this.$message({
                message: "注册失败",
                type: "warning"
              });
            });
        
        
      
    },

    // 获取公司职位名称
    // getCompany() {
    //   fetch
    //     .getCompany()
    //     .then(res => {
    //       for (let item of res.data.data.companyList) {
    //         this.options.push({value: item.name, label: item.id})
    //       }
    //     })
    //     .catch(e => {
    //       console.log(e)
    //     })
    // },

    toLogin() {
      this.$router.push({name: "login"})
    },

    toindex() {
      this.$router.push({name: "index"})
    },

    // 公司查询
    querySearch(queryString, cb) {
        var options = this.options;
        var results = queryString ? options.filter(this.createFilter(queryString)) : options;
        // 调用 callback 返回建议列表的数据
        console.log('ressshs', results)
        if (results.length === 0) {
          this.tipsShow = true;
        } else {
          this.tipsShow = false;
        }
        cb(results);
    },

    createFilter(queryString) {
        return (option) => {
          return (option.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
        };
    },
    // 选择公司
    handleSelect(item) {
      this.companyId = item.label;
    },
    // 控制添加公司弹窗显示
    changeClick() {
      this.dialogShow = true;
    },
    // 提交公司信息
    submitCompanyInfo() {
      fetch.addCompany(this.companyInfo).then(res => {
          if (res.data.code === 0) {
              this.$message({
                message: "添加成功",
                type: "success"
              });
              this.$router.push({ name: "login" });
              } else {
                this.$message({
                  message: res.data.msg,
                  type: "warning"
                  });
            }
      })
      console.log(this.companyInfo)
    },
    // 注册切换角色
    changeTabs(isHr) {
      if (!isHr) {
        this.$refs.choice.firstChild.style.fontWeight = '700'
         this.$refs.choice.lastChild.style.fontWeight = '400'
      } else {
        this.$refs.choice.firstChild.style.fontWeight = '400'
        this.$refs.choice.lastChild.style.fontWeight = '700'
      }
      this.isHr = isHr;
    },
    
  }
}
</script>
